Pull Past End Settings and Events

Description

Options for customizing what happens when the user scrolls past the end of the content in the List control.

Discussion

On touch enabled devices, scrolling is preformed by dragging on an element. Drag scrolling is enabled on the following controls:

Panel Cards
List Controls
Containers

In the case of a 'Container' you would need to give the Container a fixed height (or width if you wanted horizontal drag scrolling) and you would need to set the inline style of the container to overflow: auto;

By default, drag scrolling is only turned on if the control contains scrollable content. For example, a List control that only has a few rows that are all visible does not have scrollable content. However, if the List has more rows than can be seen, then it does have scrollable content.

When the user drags beyond the end point (top, bottom, left or right) of the control's content, the behavior is defined by the 'Pull Past End' settings. You can specify settings for both the Vertical direction and Horizontal direction. Both settings can be set to one of the following options:

Option: Description
auto: Drag past end will only be allowed if there is any scrollable content in the control.
always: Drag past end will always be allowed.
none: Drag past end will never be allowed.

For example, in a List control that only has a few rows, if you set the Vertical setting to always, the user will be able to drag down on the List and see the List content move down on the screen.

When you 'pull' past the end of the content in a control, there are Javascript events that fire. These events are:

Event: Description
onPull: Fires repeatedly while the user is pulling on the content.
onPullRelease: Fires when the user releases the 'pulled' content if the content is in a 'pulled past end' state.
onPullEnd: Fires when the user has 'pulled' content beyond an end point but has then restores the content to its 'non-pulled' state. Fires when the content is restored to its 'non-pulled' state. The use case for this event is to allow the user to cancel an action that would be triggered by some 'pull past end' action.

A common pattern in mobile applications is to refresh content, or fetch additional content when the user 'pulls' on the content beyond its end point, and then releases. The 'Pull Past End' settings and events in the UX component make it possible for developers to code this type of behavior into their mobile applications.